<template>
    <el-dialog
        class="dialog"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-bwrap form-layer-top"
            labelPosition="top"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="所属楼栋:" prop="build_sn">
                <el-select
                    v-model="formData.build_sn"
                    placeholder="请选择所属楼栋"
                    :disabled="isEdit"
                >
                    <el-option
                        v-for="item in treeData"
                        :key="item.build_sn"
                        :label="item.build_name"
                        :value="item.build_sn"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="房间编号:" prop="area_no">
                <el-input
                    v-model="formData.area_no"
                    clearable
                    maxlength="4"
                    placeholder="请输入房间编号"
                    :disabled="isEdit"
                ></el-input>
            </el-form-item>
            <el-form-item label="房间别名:" prop="area_name">
                <el-input
                    v-model="formData.area_name"
                    clearable
                    maxlength="4"
                    placeholder="请输入房间别名"
                ></el-input>
            </el-form-item>
            <el-form-item label="建筑面积(㎡):" prop="area_size">
                <el-input-number
                    :min="1"
                    :max="9999"
                    :precision="0"
                    placeholder="请输入建筑面积"
                    v-model="formData.area_size"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="房间类型:" prop="area_type">
                <el-select
                    v-model="formData.area_type"
                    placeholder="请选择房间类型"
                >
                    <el-option
                        v-for="item in areaTypeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否可招商:" prop="is_investment">
                <el-select
                    v-model="formData.is_investment"
                    placeholder="请选择是否可招商"
                >
                    <el-option
                        v-for="item in investmentData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="朝向:" prop="orientations">
                <el-select
                    v-model="formData.orientations"
                    placeholder="请选择朝向"
                >
                    <el-option
                        v-for="item in orientationsData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="租赁报价:" prop="rental_price">
                <el-input-number
                    :min="0"
                    :max="999999"
                    :precision="0"
                    placeholder="请输入租赁报价"
                    v-model="formData.rental_price"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="租赁单位:" prop="rental_unit">
                <el-select
                    v-model="formData.rental_unit"
                    placeholder="请选择租赁单位"
                >
                    <el-option
                        v-for="item in roomRentalUnitData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="装修类型:" prop="renovation_type">
                <el-select
                    v-model="formData.renovation_type"
                    placeholder="请选择装修类型"
                >
                    <el-option
                        v-for="item in renovationData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="户型:" prop="layout_type">
                <el-select
                    v-model="formData.layout_type"
                    placeholder="请选择户型"
                >
                    <el-option
                        v-for="item in roomLayoutData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="几房:" prop="bedroom_num">
                <el-input-number
                    :min="0"
                    :max="99"
                    :precision="0"
                    placeholder="请输入几房"
                    v-model="formData.bedroom_num"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="几卫:" prop="wc_room_num">
                <el-input-number
                    :min="0"
                    :max="99"
                    :precision="0"
                    placeholder="请输入几卫"
                    v-model="formData.wc_room_num"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="几厅:" prop="drawing_room_num">
                <el-input-number
                    :min="0"
                    :max="99"
                    :precision="0"
                    placeholder="请输入几厅"
                    v-model="formData.drawing_room_num"
                ></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Getter, Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { mixinTreeConfig } from "@/mixin/tree/Config";
import { findTree } from "@/utils/index";
import { isEmpty } from "lodash";
import { isUumeral } from "@/utils/valid";
@Component({
    mixins: [mixinDialogForm, mixinTreeConfig]
})
export default class HouseRoomEdit extends Vue {
    @Action("houseRoom/add") itemAdd: any;
    @Action("houseRoom/edit") itemEdit: any;

    @Getter("houseBuildings/tree") treeData: any;
    @Getter("sharing/orientations") orientationsData: any;
    @Getter("sharing/roomAreaType") areaTypeData: any;
    @Getter("sharing/roomRentalUnit") roomRentalUnitData: any;
    @Getter("sharing/renovation") renovationData: any;
    @Getter("sharing/roomLayout") roomLayoutData: any;
    @Getter("sharing/investment") investmentData: any;

    // 菜单树选中项
    selectId: number = -1;
    @Watch("selectId")
    updateSelectId(id: any) {
        const me = this as any;
        if (me.isShow && !me.isEdit) {
            // 新建时自动选中左侧树选中项
            me.formData.build_sn = id;
        }
    }
    init(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }
    closeBefore() {
        // 重置所选菜单，避免下次校验不提示
        this.formData.build_sn = "";
    }

    // 表单数据
    formData: any = {
        lease_no: "",
        lease_date: "",
        pledge_fee: "",
        wy_fee: "",
        lease_fee: "",
        tenant_sn: "",
        area_sn: ""
    };
    // 表单验证
    rules: any = {
        build_sn: [
            {
                required: true,
                message: "请选择所属楼栋"
            }
        ],
        area_type: [
            {
                required: true,
                message: "请选择房间类型"
            }
        ],
        room_purpose: [
            {
                required: true,
                message: "请选择房间用途"
            }
        ],
        is_investment: [
            {
                required: true,
                message: "请选择是否可招商"
            }
        ],
        orientations: [
            {
                required: true,
                message: "请选择朝向"
            }
        ],
        renovation_type: [
            {
                required: true,
                message: "请选择装修类型"
            }
        ],
        area_no: [
            {
                required: true,
                message: "请输入房间编号"
            },
            {
                validator: isUumeral
            },
            {
                min: 3,
                message: "只能输入3-4位数字"
            }
        ],
        area_size: [
            {
                required: true,
                message: "请输入房间面积"
            }
        ],
        room_rental: [
            {
                required: true,
                message: "请输入租赁报价"
            }
        ]
    };
    // 新增权限时不能选择有子菜单的选项
    checkParentMeun(rule: any, value: any, callback: any) {
        if (value) {
            const item: any = findTree(this.treeData, { id: value });
            if (!isEmpty(item.children)) {
                callback("不能选择父级菜单");
            }
        }
        callback();
    }
    // 标题
    get title() {
        return (this as any).isEdit ? "修改权限" : "新建权限";
    }
}
</script>